<!-- 位置编辑 -->
<template>
	<view class="positionEdit">
		<view class="positionEdit_content">
			<view class="positionEdit_content_1">
				<text>所在地区</text>
				<view class="myInput" @click="openAddr">
					{{info.address}}
				</view>
			</view>

			<view class="positionEdit_content_2 flex flex-ai-c">
				<text>详细地址</text>
				<view class="flex flex-ai-c f1 flex-jc-fe" @click="skip()">
					<input disabled v-model="info.address_detial" class="myInput" placeholder="请填写详细地址" />
					<view style="margin-left: 10rpx;" class="flex flex-ai-c">
						<i-icon icon="dingwei" size="28rpx" />
						<text>定位</text>
					</view>
				</view>
			</view>

			<view class="positionEdit_content_3">
				<view class="">
					<view>
						<text>现场图片</text>
						<text>请上传现场图片(最多3张)</text>
					</view>
					<view @click="chooseImg">
						<i-icon icon="xiangji" size="100rpx" />
					</view>
				</view>
				<scroll-view scroll-x>
					<view class="flex" style="padding: 30rpx 0;">
						<view v-for="(item,i) in domain_url" :key="i" @longpress="deletePic(item,i)" @click="preview(domain_url,i)"
							style="width: 33vw;">
							<u-image width="200rpx" height="200rpx" :src="item" mode="aspectFill"></u-image>
						</view>

					</view>
				</scroll-view>

			</view>
		</view>
		<ButtonConfirm @click="editDeviceInfo" myTxt="保存"></ButtonConfirm>
		<area-picker :show="addrShow" @cancel="addrShow = false" @addrConfirm="addrConfirm"></area-picker>
	</view>
</template>

<script>
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import home from '@/api/home.js'
	import common from '@/api/common.js'
	import areaPicker from '@/components/areaPicker.vue';
	export default {
		components: {
			ButtonConfirm,
			areaPicker
		},
		data() {
			return {
				info: {},
				addrShow: false,
				device_no: '',
				domain_url: []
			};
		},
		onLoad(op) {
			this.getDeviceInfo(op.device_no)
			this.device_no = op.device_no
		},
		methods: {
			preview(img,index) {
				uni.previewImage({
					urls: img,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				});
			},
			openAddr() {
				this.addrShow = true
			},
			addrConfirm(ids, names) {
				this.addrShow = false
				this.info.provice_id = ids.provice
				this.info.city_id = ids.city
				this.info.county_id = ids.district
				this.info.address =
					`${names.proviceName}${names.cityName ? ' '+names.cityName:''}${names.districtName?' '+names.districtName:''}`
			},
			async getDeviceInfo(device_no) {
				const res = await home.getDeviceInfo({
					device_no: device_no
				})
				this.info = res.data
				this.info.equipment_draw = this.info.equipment_draw ? this.info.equipment_draw : []
				this.domain_url = JSON.parse(JSON.stringify(res.data.equipment_draw))
				let arr = []
				// arr = res.data.equipment_draw.map(item => item.replace(/^https?:\/\/(.*?)(:\d+)?\/.*$/, '$1'));
				// console.log(this.domain_url)
			},
			async editDeviceInfo() {
				const {
					device_no,
					provice_id,
					city_id,
					county_id,
					address_detial,
					lat,
					lng,
					equipment_draw
				} = this.info
				if (!equipment_draw.length) return uni.showToast({
					title: '请上传图片',
					icon: "none"
				})
				const res = await home.editDeviceInfo({
					device_no,
					provice_id,
					city_id,
					county_id,
					address_detial,
					lat,
					lng,
					equipment_draw: equipment_draw.join(',')
				})
				if (res.code === 200) {
					uni.showToast({
						title: '保存成功',
						icon: "none"
					})
				}
			},
			chooseLocation(data) {
				let that = this
				uni.chooseLocation({
					...data,
					success: function(res) {
						uni.hideLoading()
						that.info.lat = res.latitude
						that.info.lng = res.longitude
						that.info.address_detial = res.name
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			getLocation() {
				uni.showLoading()
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						that.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
						})
					},
					fail: function(err) {
						that.chooseLocation({
							latitude: 37.870472,
							longitude: 112.548877,
						})
					}
				})
			},
			skip() {
				let that = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						that.getLocation()
					},
					fail: () => {
						that.getLocation()
					}
				})

			},
			// 图片上传
			// 删除图片
			deletePic(img, index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除',
					confirmColor: '#FCB527',
					success(e) {
						if (e.confirm) {
							that.info.equipment_draw.splice(index, 1)
							that.domain_url.splice(index, 1)
						}
					}
				})
			},
			chooseImg() {
				if (this.info.equipment_draw.length >= 3) {
					return uni.showToast({
						title: '不能超过三张图片',
						icon: 'none'
					})
				}
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// this.tempFilePaths = res.tempFilePaths[0]
						this.upload(res.tempFilePaths)
					}
				})
			},
			// 新增图片
			async upload(files) {
				for (let i in files) {
					let res = await common.upload(files[i])
					this.domain_url.push(res.data.domain_url)
					this.info.equipment_draw.push(res.data.domain_url)
				}
				console.log(this.info.equipment_draw)
			},
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.positionEdit {
		&_content {
			box-sizing: border-box;
			padding: 0 36rpx 10rpx 36rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 3rpx rgba(216, 216, 216, 0.5);
			margin-bottom: 80rpx;
			margin-top: 20rpx;

			// 输入框
			.myInput {
				text-align: right !important;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}


			&>view:not(:last-child) {
				border-bottom: 1px solid #D8D8D8;
			}

			&>view {
				box-sizing: border-box;
				padding: 0 4rpx;
			}

			&_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				&>view {
					display: flex;
					align-items: center;

					// 图片和文字
					&>view:nth-child(2) {
						margin-left: 60rpx;

						image {
							width: 24rpx;
							height: 28rpx;
							margin-right: 14rpx;
						}

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
				}

			}

			.positionEdit_content_2 {
				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}


			&_3 {
				image:not(:last-child) {
					margin-right: 20rpx;
				}

				// 上面文字和上传
				&>view:nth-child(1) {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;

					// 文字
					&>view:nth-child(1) {
						display: flex;
						flex-direction: column;

						&>text:nth-child(1) {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 16rpx;
						}

						&>text:nth-child(2) {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}

					// 上传图片
					&>view:nth-child(2) {
						image {
							width: 82rpx;
							height: 82rpx;
						}
					}
				}

				// 下面图片显示
				&>view:nth-child(2) {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}
			}




		}
	}
</style>